<template>
<div class="goodlist">
    <div class="goods-item" v-for="item in goodlist" :key='item.id' @click="goDtail(item.id)">
        <img :src="item.img_url" alt="">
            <h1 class="title">{{item.title}}</h1>
        <div class="info">
        <p class="price">
            <span class="now">{{item.sell_price}}</span>
            <span class="old">{{item.market_price}}</span>
        </p>
        <p class="sell">
            <span class="">热卖中</span>
            <span class="">剩{{item.stock_quantity}}件</span>
        </p>
        </div>
    </div>
    <mt-button type="danger" size="large" @click="getmore">加载更多</mt-button>
</div>
</template>

<script>
import { Toast } from 'mint-ui';
import { Button } from 'mint-ui';
export default {
    data(){
        return{
            pageindex:1,
            goodlist:[]
        }
    },
    created(){
        this.getGoodList()
    },
    methods:{
        getGoodList(){
            this.$http.get('http://www.liulongbin.top:3005/api/getgoods?pageindex='+this.pageindex).then(res=>{
                if(res.body.status === 0){
                    this.goodlist = this.goodlist.concat(res.body.message)
                }
                else{
                    Toast('商品数据加载失败')
                }
            })
        },
        getmore(){
            this.pageindex++;
            this.getGoodList();
        },
        goDtail(id){
            ////获取商品详情
            //////这里使用js导航进行路由的跳转
            this.$router.push({name:'goodInfo',params:{id}})
        }
    }
}
</script>

<style lang="css" scoped>
.goodlist{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #fff;
}
.goods-item{
    width: 49%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 4px 0;
    padding:2px;
    min-height: 293px;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;

}
img{
    width: 100%
}
.title{
    font-size: 14px;
}
.info{
    background-color: #eee;
}
.info .price .now{
    font-size: 16px;
    color:red;
    font-weight: bold;
}
.info .price .old{
    font-size: 12px;
    margin-left: 10px;
    text-decoration: line-through;
}
.info .sell{
    display: flex;
    justify-content: space-between;
    font-size: 13px;

}
</style>

